<section class="material-half-bg">
  <div class="cover"></div>
</section>
<section class="login-content">
  <div class="logo">
    <h1>源创艺</h1>
  </div>
  <div class="login-box">
    <form #loginForm="ngForm" class="login-form" >
      <h3 class="login-head"><i class="fa fa-lg fa-fw fa-user"></i>登录</h3>
      <div class="form-group">
        <label class="control-label">用户名</label>
        <input class="form-control" type="text" placeholder="用户名" autofocus [(ngModel)]="user.username" name="username">
        <div *ngIf="messages.username" class="red"> {{messages.username}}</div>
      </div>
      <div class="form-group">
        <label class="control-label">密码</label>
        <input class="form-control" type="password" placeholder="密码" [(ngModel)]="user.mima" name="password">
        <div *ngIf=" messages.password" class="red">{{messages.password}}</div>
      </div>
      <div class="form-group">
        <div class="utility">
          <div class="animated-checkbox">
            <label>
              <input type="checkbox"><span class="label-text">记住密码</span>
            </label>
          </div>
          <!--<p class="semibold-text mb-2"><a href="#" data-toggle="flip" (click)="addClass()">忘记密码 ?</a></p>-->
        </div>
      </div>
      <div class="form-group btn-container">
        <button class="btn btn-primary btn-block" (click)="login()"><i class="fa fa-sign-in fa-lg fa-fw"></i>登录</button>
      </div>
    </form>
    <form #forgetForm="ngForm" class="forget-form">
      <h3 class="login-head"><i class="fa fa-lg fa-fw fa-lock"></i>忘记密码?</h3>
      <div class="form-group">
        <label class="control-label">用户名</label>
        <input required class="form-control" type="text" placeholder="请输入用户名" autofocus [(ngModel)]="updateUser.username" name="username">
        <div *ngIf="messages1.username" class="red">{{messages1.username}}</div>
      </div>
      <div class="form-group">
        <label class="control-label">新密码</label>
        <input class="form-control" type="password" placeholder="密码" [(ngModel)] ="updateUser.address" name="newPassword"
               required pattern="(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}">
        <div *ngIf="messages1.newPassword" class="red">{{messages1.newPassword}}</div>
      </div>
      <div class="form-group">
        <label class="control-label">确定密码</label>
        <input class="form-control"  type="password" placeholder="确认密码"  [pattern]="'^'+updateUser.address+'$'" required [(ngModel)] ="user.confirmPassword" name="confirmPassword">
        <div *ngIf=" messages1.confirmPassword" class="red">{{messages1.confirmPassword}}</div>
      </div>
      <div class="form-group btn-container">
        <button class="btn btn-primary btn-block" (click)="surename()"><i class="fa fa-unlock fa-lg fa-fw"></i>确认</button>
      </div>
      <div class="form-group mt-3">
        <p class="semibold-text mb-0"><a href="#" data-toggle="flip" (click)="addClass()"><i class="fa fa-angle-left fa-fw"></i>返回登录</a></p>
      </div>
    </form>
  </div>
</section>
